<template>
  <!-- header start -->
  <div>
    <div class="header">
      <div class="w">
        <span @click="logout" >退出</span>
        <span>您好，{{backUserName}}</span>
      </div>
    </div>
  </div>
  <!-- header end -->
</template>

<script>
export default {
  name: 'top',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    logout: function () {
      localStorage.clear()
      document.cookie = ''
      this.$router.push({ path: 'login' })
    }
  },
  computed: {
    backUserName: function () {
      return localStorage.backUserName
    }
  }
}
</script>

<style scoped>
.header{width:100%; height:41px;line-height: 41px; background:#F6F6F6;border-bottom:1px solid #DEDEDE;min-width:1200px;}
.header span{float:right;color:#585858;margin-left:30px;}
.header span:first-child{cursor: pointer;}
</style>
